<script setup lang="ts">
import {useUserStore} from "../stores/user.ts";
import {computed, onMounted} from "vue";
import {storeToRefs} from "pinia";
import {useUserMessageStore} from "../stores/user_message.ts";
import {loadMessage} from "../actions/load_message.ts";
import {Files} from "@element-plus/icons-vue";

defineProps({
  size: {
    type: Number,
    default: 25,
  },
})
let {userInfo,toUserAccount} = storeToRefs(useUserStore());

const {messageMap} = storeToRefs(useUserMessageStore());
const messageList: object[] = computed(() => {
  return messageMap.value[toUserAccount.value] || [];
});
onMounted(() => {
  loadMessage();
})
</script>

<template>
  <el-main class="el-main-one">
    <el-scrollbar noresize="noresize" style="height:100%">
      <template v-for="(item) in messageList">
        <div class="message-bubble-right" v-if="userInfo.account == item.sender_account">
          <div class="message-bubble-right-content">
            <div>{{ userInfo.account + item.message_type }}</div>
            <div class="message-bubble-sender">
              <span v-if="item.message_type == 'Text' || item.message_type == 'TextLogin'">{{ item.content }}</span>
              <el-image v-else-if = "item.message_type == 'Image'" :src="'data:image/png;base64,' + item.content" fit="contain" />
              <template v-else-if="item.message_type == 'File'">
                <a :href="'http://localhost:3030/files/' + JSON.parse(item.content)['fileName']" target="_blank">
                  <div class="message-bubble-sender-file">
                    <span>{{ JSON.parse(item.content)['fileName'] }}</span>
                    <el-icon :size="size+15" :color="'deepskyblue'"><Files /></el-icon>
                  </div>
                </a>
              </template>

            </div>
          </div>
          <div>
            <el-avatar :size="size+10" shape="square" :src="'/avatar/001.png'"/>
          </div>
        </div>
        <div v-else class="message-bubble-left">
          <div>
            <el-avatar :size="size+10" shape="square" :src="'/avatar/001.png'"/>
          </div>
          <div class="message-bubble-left-content">
            <div>{{ item.sender_account + item.message_type }}</div>
            <div class="message-bubble-receiver">
              <span v-if="item.message_type == 'Text' || item.message_type == 'TextLogin'">{{ item.content }}</span>
              <el-image v-else-if = "item.message_type == 'Image'" :src="'data:image/png;base64,' + item.content" fit="contain" />
              <template v-else-if="item.message_type == 'File'">
                <a :href="'http://localhost:3030/files/' + JSON.parse(item.content)['fileName']" target="_blank">
                  <div class="message-bubble-receiver-file">
                    <span>{{ JSON.parse(item.content)['fileName'] }}</span>
                    <el-icon :size="size+15" :color="'deepskyblue'"><Files /></el-icon>
                  </div>
                </a>
              </template>
            </div>
          </div>
        </div>
      </template>
    </el-scrollbar>
  </el-main>
</template>

<style scoped>
.el-main-one {
  flex: 1;
  height: 100%;
  border-left: 1px solid #dedede;
}
.message-bubble-left {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-start;
  margin-bottom: 10px
}

.message-bubble-right {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-end;
  margin-bottom: 10px
}

.message-bubble-left-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
}

.message-bubble-right-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 10px;
}
.message-bubble-left {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-start;
  margin-top: 15px;
}

.message-bubble-right {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-end;
  margin-top: 15px
}

.message-bubble-left-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
}

.message-bubble-right-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 10px;
}

.message-bubble-sender {
  background-color: #95e695;
  padding: 10px;
  border-radius: 15px 0 15px 15px;
  max-width: 80%;
  word-wrap: break-word;
}
.message-bubble-sender-file{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}
.message-bubble-receiver-file{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}
.message-bubble-sender-file span,.message-bubble-receiver-file span {
  white-space: nowrap;
}
.message-bubble-sender::after {
  content: '';
  position: absolute;
  top: 10px;
  right: -10px;
  border-width: 10px 0 10px 10px;
  border-style: solid;
  border-color: transparent #95e695 transparent transparent;
}

.message-bubble-receiver {
  background-color: #fff;
  padding: 10px;
  border-radius: 0 15px 15px 15px;

  max-width: 80%;
  word-wrap: break-word;

}

.message-bubble-receiver::after {
  content: '';
  position: absolute;
  top: 10px;
  left: -10px;
  border-width: 10px 10px 10px 0;
  border-style: solid;
  border-color: #e0e0e0 transparent transparent transparent;
}

</style>